<template>
  <div class="menu">
    <el-aside width="250px">
      <el-menu
        router
        active-text-color="#ffd04b"
        background-color="#2578b5"
        class="el-menu-vertical-demo"
        :default-active="activePath"
        unique-opened
        text-color="#fff"
      >
        <template v-for="(item, index) in menus">
          <el-sub-menu :index="item.path" :key="index" v-if="!item.hidden">
            <template #title>
              <i :class="item.iconClass"></i>
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item
              v-for="(child, index) in item.children"
              :index="child.path"
              :key="index"
            >
              <i :class="child.iconClass"></i
              ><span>{{ child.name }}</span></el-menu-item
            >
          </el-sub-menu>
        </template>
      </el-menu>
    </el-aside>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
const menus = router.options.routes;
const activePath = router.currentRoute.value.path;
</script>
<script>
// export default {
//   data () {
//     return {
//       menus:[]
//     }
//   },
//   created() {
//     this.$http.get("http://localhost:3003/nav").then((res) => {
//       this.menus=res.data
//     })
//   },
// };
</script>
<style lang="less">
.menu {
  .el-aside {
    height: 100%;
    .el-menu {
      height: 100%;
      span {
        padding-left: 10px;
      }
    }
  }
}
</style>